<template>
  <div class="dashboard-container pb50">
    <vue-scroll :ops="ops">
      <div class="flex flex-row flex-wrap top-box">
        <div class="card flex flex-row">
          <img src="@/assets/dashboard/sb.png" alt="">
          <div class="flex flex-column flex-auto text-center">
            <div class="label">我上报的</div>
            <div class="number">{{ totalInfo.applyTotal }} 项</div>
          </div>
        </div>
        <div class="card flex flex-row">
          <img src="@/assets/dashboard/wsp.png" alt="">
          <div class="flex flex-column flex-auto text-center">
            <div class="label">未审批的</div>
            <div class="number">{{ totalInfo.noAuditTotal }} 项</div>
          </div>
        </div>
        <div class="card flex flex-row">
          <img src="@/assets/dashboard/sp.png" alt="">
          <div class="flex flex-column flex-auto text-center">
            <div class="label">已审批的</div>
            <div class="number">{{ totalInfo.auditTotal }} 项</div>
          </div>
        </div>
      </div>
      <!-- 常见服务 -->
      <div class="content-box">
        <div class="middle">
          <div class="flex align-center">
            <div class="line mr10" />
            <div class="title">常用应用</div>
          </div>
          <div class="card-list flex flex-row align-center">
            <div class="flex flex-row align-center width300">
              <div class="card-box flex flex-row align-center" @click="goApp('新技术管理平台', 'xjsxxm', '/project/apply')">
                <img src="@/assets/008.png" alt="">
                <div class="flex-auto pl30">
                  <div class="title">新技术管理平台</div>
                  <div class="label mt10">上报新技术新项目</div>
                </div>
              </div>
            </div>
            <div class="flex flex-row align-center width300">
              <div class="card-box flex flex-row align-center" @click="showDevelopingMessage">
                <img src="@/assets/009.png" alt="">
                <div class="flex-auto pl30">
                  <div class="title">项目申请与审批</div>
                  <div class="label mt10">临床急需开展项目申请与审批</div>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="table-box">
          <el-row :gutter="15">
            <el-col :md="12" :lg="12" :xl="12" class="left-home-box">
              <el-card shadow="hover" class="mb10 border-radius-12 left-table">
                <div slot="header">
                  <div class="flex align-center">
                    <div class="line mr10" />
                    <div class="title">我上报的</div>
                  </div>
                </div>
                <div class="dash-table">
                  <el-table :data="createList" stripe :header-cell-style="{ background: '#e9f0f7', color: '#215195',padding:'3px 0px' }" height="300" style="width: 100%;min-height:300px;" size="medium" :row-style="{ height: '10px' }" class="dashboard-table">
                    <el-table-column label="类型" prop="typeName" width="120px" align="center" />
                    <el-table-column label="名称" prop="name" align="center" :show-overflow-tooltip="true" />
                    <el-table-column prop="time" label="时间" align="center" width="170px" />
                    <el-table-column label="状态" align="center" width="100px">
                      <template slot-scope="scope">
                        <span>{{ scope.row.state == 1 ? '已上报' : '未上报' }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
            <el-col :md="12" :lg="12" :xl="12" class="left-home-box">
              <el-card shadow="hover" class="mb10 border-radius-12 left-table">
                <div slot="header">
                  <div class="flex align-center">
                    <div class="line mr10" />
                    <div class="title">待审批的</div>
                  </div>
                </div>
                <div class="dash-table">
                  <el-table :data="todoList" stripe :header-cell-style="{ background: '#e9f0f7', color: '#215195',padding:'3px 0px' }" height="300" style="width: 100%;min-height:300px;" size="medium" :row-style="{ height: '10px' }" class="dashboard-table">
                    <el-table-column label="类型" prop="typeName" width="120px" align="center" />
                    <el-table-column label="名称" prop="name" align="center" :show-overflow-tooltip="true" />
                    <el-table-column prop="time" label="时间" align="center" width="170px" />
                    <el-table-column label="状态" align="center" width="100px">
                      <template slot-scope="scope">
                        <span>{{ scope.row.state == 1 ? '已审批' : '未审批' }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="message-box">
          <el-row :gutter="15" class="mt15">
            <el-col :md="12" :lg="12" :xl="12" class="left-home-box">
              <el-card shadow="hover" class="mb10 border-radius-12 left-table">
                <div slot="header">
                  <div class="flex align-center">
                    <div class="line mr10" />
                    <div class="title">系统消息</div>
                  </div>
                </div>
                <!-- <div class="dash-table gaugeTable">
                  <NoticeList ref="noticeListRef" />
                </div> -->
                <div class="dash-table">
                  <el-table :data="msgList" stripe :header-cell-style="{ background: '#e9f0f7', color: '#215195',padding:'3px 0px' }" height="300" style="width: 100%;min-height:300px;" size="medium" :row-style="{ height: '10px' }" class="dashboard-table">
                    <el-table-column label="类型" prop="relatedType" width="120px" align="center" />
                    <el-table-column label="名称" prop="logTitle" align="center" :show-overflow-tooltip="true" width="170px" />
                    <el-table-column prop="logContent" label="内容" align="center" :show-overflow-tooltip="true" />
                    <el-table-column label="状态" align="center" width="100px">
                      <template slot-scope="scope">
                        <span>{{ scope.row.operateStatus == 1 ? '已读' : '未读' }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </vue-scroll>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { initData } from '@/api/dashboard'
// import { workOrderList } from '@/api/process/work-order'
// import { workOrderList as baqsjWorkOrderList } from '@/api/baqsj/work-order'
// import { workOrderList as xjsWorkOrderList } from '@/api/xjs/work-order'

import { getHomeTotal, getHomeMyApply, getHomeNoAuditList, getHomeSysMessageList } from '@/api/dashboard'
import NoticeList from './components/common/noticeList'
import { projectClassList } from '@/utils/common'
export default {
  name: 'Navigation',
  components: { NoticeList },
  data() {
    return {
      totalInfo: {
        applyTotal: 0, // 我上报的
        auditTotal: 0, // 已审批总数
        noAuditTotal: 0 // 未审批总数
      },
      projectClassList: projectClassList,
      todoList: [],
      createList: [],
      doneList: [],
      queryList: {},
      msgList: [],
      ops: {
        vuescroll: {
          mode: 'native',
          sizeStrategy: 'percent',
          detectResize: true,
          locking: true
        },
        bar: {
          background: '#215195',
          size: '5px',
          keepShow: true
        },
        rail: {
          background: '#E0E8F0',
          opacity: 1,
          size: '5px',
          specifyBorderRadius: false,
          gutterOfEnds: '50px',
          gutterOfSide: '0px',
          keepShow: false
        }
      }
    }
  },
  computed: {
    ...mapGetters(['avatar', 'device', 'name', 'roles','menuList'])
  },
  created() {
    // 获取统计数据
    this.getHomeTotalInfo()
    // 待审批列表
    this.getMyTodoList()
    // 我上报的列表
    this.getMyList()
    // 消息列表
    this.getMessageList()
  },
  methods: {
    getHomeTotalInfo() {
      getHomeTotal().then(res => {
        this.totalInfo = res.records[0]
      })
    },
    getMyTodoList() {
      getHomeNoAuditList().then(res => {
        res.records.forEach(item => {
          const typeObj = this.projectClassList.find(it => it.value == item.typeName)
          if (typeObj) {
            item.typeName = typeObj.label
          }
        })
        this.todoList = res.records
      })
    },
    getMyList() {
      getHomeMyApply().then(res => {
        res.records.forEach(item => {
          const typeObj = this.projectClassList.find(it => it.value == item.typeName)
          if (typeObj) {
            item.typeName = typeObj.label
          }
        })
        this.createList = res.records
      })
    },
    getMessageList() {
      getHomeSysMessageList().then(res => {
        this.msgList = res.records
      })
    },

    goApp(name, mid, url) {
      // console.log("用户路由",this.menuList)
      const _xjsxxmMenu = this.menuList.filter(item=>item.sysModule === "xjsxxm"&&item.menuType==='F');
      localStorage.setItem('currentApp', JSON.stringify({ name: name, mid: mid }))
      this.$router.push({ path: _xjsxxmMenu[0].path })
    },
    goApp2(name, mid, url) {
      localStorage.setItem('currentApp', JSON.stringify({ name: name, mid: mid }));
      this.$router.push({ path: url });
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('user/LogOut').then(() => {
          location.reload()
        })
      })
    },
    showDevelopingMessage() {
      this.$message({
        message: '功能开发中，敬请期待...',
        type: 'warning'
      })
    }
  }
}

</script>
<style lang="scss" scoped>
.dashboard-container {
    padding: 10px;

    .card {
        width: 200px;
        height: 86px;
        background: #fff;
        margin-right: 30px;
        margin-bottom: 10px;
        border-radius: 10px;
        padding: 10px;
        align-items: center;
        color: #000;
        position: relative;
        -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        transition: 0.2s all ease;

        img {
            width: 50px;
            height: 50px;
        }

        &:hover {
            -webkit-box-shadow: 0 5px 10px 0 rgb(0 0 0 / 30%);
            box-shadow: 0 5px 10px 0 rgb(0 0 0 / 30%);
            cursor: pointer;
        }

        .number {
            color: #263238;
            font-size: 22px;
            font-weight: 600;
            margin-top: 10px;
        }

        .label {
            font-size: 16px;
            color: #606266;
        }
    }

    .content-box {
        color: #fff;
        background: hsla(0, 0%, 100%, 0.1);
        border: 2px solid hsla(0, 0%, 100%, 0.75);
        box-shadow: 0 0 23px 3px rgba(186, 204, 218, 0.25);
        border-radius: 15px;
        padding: 10px;

        .table-box {
            width: 100%;

            .title {
                font-size: 17px;
                font-weight: bold;
                color: #263238;
                line-height: 20px;
            }
        }

        .message-box {
            width: 100%;

            .title {
                font-size: 17px;
                font-weight: bold;
                color: #263238;
                line-height: 20px;
            }
        }
    }

    .middle {
        padding: 10px 5px;

        .title {
            font-size: 18px;
            font-weight: bold;
            color: #263238;
        }

        img {
            width: 50px;
            height: 50px;
        }

        .card-box {
            background: #fff;
            border-radius: 10px;
            margin: 15px 30px 10px 0px;
            padding: 15px 10px;
            position: relative;
            top: 0;
            -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
            right: 0;
            flex: 1;
            transition: 0.2s all ease;

            .title {
                font-size: 18px;
                font-weight: bold;
                color: #263238;
            }

            .label {
                font-size: 15px;
                color: #97a2b0;
            }

            &:hover {
                top: -3px;
                right: -1px;
                -webkit-box-shadow: 0 7px 15px 0 rgb(0 0 0 / 20%);
                box-shadow: 0 7px 15px 0 rgb(0 0 0 / 20%);
                cursor: pointer;
            }
        }
    }
}
</style>
